<template>
	<view>
		<zy-title rightIcon="ic_add_white.png" rightIcon2="ic_person_white.png">
			<slot name="back">
				<view class="zy-text-white-lg-bold zy-ml-lg" style="font-size: 42rpx; ">聊天</view>
			</slot>
		</zy-title>
		
		<view class="zy-ph-lg">
			<view class="zy-row zy-mt-lg zy-ph-lg search-c">
				<image class="zy-icon" mode="widthFix" :src="getImageUrl('ic_search_gray.png')"></image>
				<input class="zy-flex zy-text-gray-light zy-ml" placeholder="搜索"/>
			</view>
			
			<view v-for="(item, index) in conversationList" :key="index" @click="toChat(item.conversationID, item.userProfile.userID)">
				<view class="zy-row zy-mv" >
					<!-- 头像，未读消息 -->
					<uni-badge class="badge-c" :text="item.unreadCount" absolute="rightTop" size="small">
						<image :src="item.userProfile.avatar"></image>
					</uni-badge>
					<!-- 昵称，消息内容，时间 -->
					<view class="zy-column-center zy-flex">
						<view class="zy-row">
							<view class="zy-text-white-lg-bold zy-flex">{{item.userProfile.nick}}</view>
							<view class="zy-text-gray-sm-super">{{timestampToText(item.lastMessage.lastTime * 1000)}}</view>
						</view>
						<view class="zy-text-gray-light">{{item.lastMessage.messageForShow}}</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import constant from '@/common/constant.js'
    import IMUtil from "@/main/common/IMUtil.js";
	import TimeUtil from '@/main/common/TimeUtil.js'
	import RouteUtil from '@/main/common/RouteUtil';
	export default {
		data() {
			return {
				conversationList: [],
			};
		},
		onShow() {
			this.getConversationList();
		},
		methods: {
			// 获取全量的会话列表
			getConversationList(){
				IMUtil.getConversationList().then(res=>{
					this.conversationList = res;
				})
			},
			toChat(conversationID, texcode){
				IMUtil.toChat(texcode)
			},
			timestampToText(timestamp) {
				return TimeUtil.timestampToText(timestamp)
			}
		}
	}
</script>

<style lang="scss">
	
	.search-c{
		height: 65rpx;
		background: rgba(#ffffff, 0.1);
		border-radius: 15rpx;
	}
	
	.badge-c{
		position: relative;
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	
</style>

